<template>
	<view class="container">
		<view class="main">
			<view class="member-text">
				<text>邀请小伙伴</text>
				<text>赚更多钱，还有升级奖励</text>
			</view>
			<view class="member-button" @click="createPoster">邀请海报></view>
		</view>

		<!-- 海报显示 -->
		<u-popup v-model="showPoster" mode="center" width="700" height="500" closeable="true">
			<view style="overflow: hidden;">
				<image mode="aspectFit" style="width: 77vw;height: 67vh;padding: 20px 20px 70px;" show-menu-by-longpress="true" :src="posterImage"></image>
				<view style="display: flex;justify-content: space-around;margin: 25px;margin-top: -55px;">
					<button class="shareBtn" open-type="share">分享给好友</button>
					<button class="shareBtn" @click="saveImage">保存图片</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default{
		data() {
			return{
				showPoster: false,
				posterImage: ''
			}
		},

		methods: {

			createPoster() {

				if (wx.getStorageSync("userToken") != "") {
					wx.showLoading({
						title: "生成中...",
						mask: true,
					})
					this.$api.getShareImg({},this.$baseUrl).then(res => {
						if (res.data.level = "success") {
							wx.hideLoading();
							wx.showToast({
								title: res.data.message,
								duration: 1500,
								icon: "none"
							});
							this.showPoster = true
							this.posterImage = res.data.data.share_img_url
						} else {
							wx.showToast({
								title: '生成失败！',
								duration: 1500,
								icon: "none"
							});

							wx.hideLoading();
						}

					})
				} else {
					/*this.bindGetUserInfo()*/
					this.$currency.bindGetUserInfo()
				}
			},

		}
	}
</script>

<style lang="scss" scoped>

	.main {
		width: 700rpx;
		height: 160rpx;
		background-image: url(../../static/person/member_content.png);
        background-size: 100% auto;
        background-repeat: no-repeat;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.member-text{
			color: #F2C991;
			font-size: 14px;
			display: flex;
			flex-direction: column;
			margin-left: 28px;
		}
		.member-button{
			width: 80px;
			height: 30px;
			background-color: #EBC28D;
			border-radius: 15px;
			line-height: 30px;
			text-align: center;
			font-size: 12px;
			color: #3A362D;
			margin-right: 15px;
		}
	}


</style>
